export default {
  created() {
    // 在vue中的created阶段给 调用数据（将数据赋值给级联控件中的cascadeOptions，获取所有分类数据）
    this.getData();
  },
  data() {
    return {
      // 级联数据 选中的分类数据
      selectedCateArr: [],
      // 级联数据 所有级分类数据
      cascaderOptions: [],
      // 级联数据 属性相关属性
      cascaderProps: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
      },
      // tabs的属性 参数类型
      activeName: "many",
      // 控制按钮禁用
      disabled: true,
      // 动态参数列表数据
      manyAttrs: [],
      // 静态参数列表数据
      onlyAttrs: [],
      // 与添加参数相关的数据
      dialogFormVisible: false,
      form: {
        attr_name: "",
      },
      rules: {
        attr_name: [
          { required: true, message: "参数名称必须填写", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
      // 控制 +Newtag 显示隐藏
      tagVisiable: true,

      // 与编辑参数相关的数据
      editDialogFormVisible: false,
      editForm: {
        attr_name: "",
        attr_id: "",
        attr_sel: "",
      },
    };
  },
  // 计算属性：当需要的一项数据，需要依赖data中的数据，通过一些逻辑得到
  // 语法：computed:{key:value} key：数据的名字 value:数据对应的函数 必须有返回值
  computed: {
    thirdCateId() {
      let id = null;
      if (this.selectedCateArr.length === 3) {
        id = this.selectedCateArr[2];
      }
      return id;
    },
  },
  methods: {
    // 提交修改参数
    editParams() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          const {
            data: { meta },
          } = await this.$http.put(
            `categories/${this.thirdCateId}/attributes/${this.editForm.attr_id}`,
            {
              attr_name: this.editForm.attr_name,
              attr_sel: this.editForm.attr_sel,
            }
          );
          if (meta.status !== 200) return this.$message.error(meta.msg);
          this.editDialogFormVisible = false;
          this.getParamsData();
        }
      });
    },
    // 打开修改参数对话框
    async openEditDialog(row) {
      this.editDialogFormVisible = true;
      // console.log(row);
      // console.log(typeof row.attr_id);
      // console.log(typeof this.thirdCateId);
      const {
        data: { data, meta },
      } = await this.$http.put(
        `categories/${this.thirdCateId}/attributes/${row.attr_id}`,
        {
          attr_name: row.attr_name,
          attr_sel: row.attr_sel,
        }
      );
      console.log(data);
      if (meta.status !== 200) return this.$message.error(meta.msg);
      // this.$message.success(meta.msg);
      // console.log(data, meta.msg);
      this.editForm.attr_name = data.attr_name;
      this.editForm.attr_id = data.attr_id;
      this.editForm.attr_sel = data.attr_sel;
    },
    // 键盘事件 按enter隐藏input框
    KeyupEnter(row) {
      row.tagVisiable = true;
    },
    // 删除(修改属性值) 属性值的其中一项
    delAttrVals(row, i) {
      //row.attr_vals.splice("起始索引"，"删除几项")
      row.attr_vals.splice(i, 1);
      this.editAttrVals(row);
    },
    // 添加(修改属性值)
    addAttrVals(row) {
      row.tagVisiable = true;
      // 没有输入内容 阻止
      if (!row.inputVal) return false;
      // attr_vals 在末尾追加一项
      row.attr_vals.push(row.inputVal);
      // 更新属性列表数据
      this.editAttrVals(row);
    },
    // 封装一个修改属性值的函数提供 删除和添加 属性的值中的一项 使用
    async editAttrVals(row) {
      // 1.三级分类ID - this.thirdCateId
      // 2.当前属性的ID - row.attr_id
      // 3.当前属性的名称 - row.attr_name
      // 4.当前属性类型 - row.attr_sel
      // 5.当前属性的值 - row.attr_vals 但是字符串类型以“,”号分隔
      const {
        data: { meta },
      } = await this.$http.put(
        `categories/${this.thirdCateId}/attributes/${row.attr_id}`,
        {
          attr_name: row.attr_name,
          attr_sel: row.attr_sel,
          attr_vals: row.attr_vals.join(","),
        }
      );
      // 修改失败
      if (meta.status !== 200) return this.$message.error(meta.msg);
      // 修改成功
      this.$message.success(meta.msg);
    },
    // 点击 +Newtag 按钮 this.$refs[add_input_${row.attr_id}].foucs()
    addTag(row) {
      row.tagVisiable = false;
      // 打开input框时把内容设置为""空
      row.inputVal = "";
      this.$nextTick(() => {
        // 获取焦点 操作dom需要渲染完毕才能操作
        this.$refs[`add_input_${row.attr_id}`].focus();
      });
    },
    delParams(attrId) {
      // 1. 确认框
      // 2. 获取数据 参数ID 三级分类ID
      // 3. 请求
      this.$confirm("亲，是否删除该参数？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 确认操作
          const {
            data: { meta },
          } = await this.$http.delete(
            `categories/${this.thirdCateId}/attributes/${attrId}`
          );
          if (meta.status !== 200) return this.$message.error(meta.msg);
          this.getParamsData();
          this.$message.success("删除参数成功");
        })
        .catch(() => null);
    },
    addParams() {
      // 1. 进行表单校验
      // 2. 获取后端需要的数据
      // 3. 发送请求
      // 4. 失败 提示
      // 5. 成功：关闭对话框 更新当前的参数列表
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // id 其实就是 this.thirdCateId
          // attr_name 其实就是 this.form.attr_name
          // attr_sel 其实就是 this.activeName
          const {
            data: { meta },
          } = await this.$http.post(
            `categories/${this.thirdCateId}/attributes`,
            {
              attr_name: this.form.attr_name,
              attr_sel: this.activeName,
            }
          );
          if (meta.status !== 201) return this.$message.error(meta.msg);
          this.dialogFormVisible = false;
          this.getParamsData();
          this.$message.success("添加参数成功");
        }
      });
    },
    openAddDialog() {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    // 封装一个函数/方法 用于获取分类列表（标签页）数据
    async getParamsData() {
      // 严谨处理 让你的程序更健壮（如果id值不是3 就停止代码）
      if (!this.thirdCateId) {
        return false;
      }
      // 获取参数列表数据
      // 依赖：第三级分类的ID
      // 依赖：参数的类型
      const {
        data: { data, meta },
      } = await this.$http.get(`categories/${this.thirdCateId}/attributes`, {
        params: { sel: this.activeName },
      });
      if (meta.status == 201) return this.$message.error(meta.msg);
      // console.log(data, meta);
      //在动态参数列表渲染的时候 attr_vals需求数组
      if (this.activeName === "many") {
        // data[{attr_name,attr_vals},{},{}]
        data.forEach((item) => {
          // attr_vals 可能是空字符串 使用split('')产生空的一项的数组
          item.attr_vals = item.attr_vals ? item.attr_vals.split(",") : [];
          // 数据：控制当前的tag的显示隐藏
          item.tagVisiable = true;
          // 数据：绑定输入内容
          item.inputVal = "";
        });
      }

      // 赋值修改manyAttrs渲染
      // 赋值修改onlyAttrs渲染
      // 根据当前参数类型 去赋值
      this[this.activeName + "Attrs"] = data;
    },
    // 切换选项卡触发的事件
    handleClick() {
      // tab是当前选中的选项卡的实例对象
      // console.log(tab)
      // 调用这个函数获取分类列表（标签页）数据
      this.getParamsData();
    },
    // 选择了分类触发事件
    async handleChange() {
      // console.log(this.selectedCateArr);
      // 参数是挂在 三级分类下 其他分类无意义的
      if (this.selectedCateArr.length !== 3) {
        this.$message.warning("只允许为第三级分类设置相关参数！", "提示");
        this.selectedCateArr = []; // 清空级联
        this.disabled = true; // 禁用按钮
        // this[this.activeName + "Attrs"] = []; // 清空标签页数据列表
        this.manyAttrs = []; // 清空标签页动态数据列表
        this.onlyAttrs = []; // 清空标签页静态数据列表
        return false;
      }
      // 选中第三级
      this.disabled = false;
      this.getParamsData();
    },
    async getData() {
      const {
        data: { data, meta },
      } = await this.$http.get("categories");
      if (meta.status !== 200) return this.$message.error(meta.msg);
      // console.log(data, meta);
      this.cascaderOptions = data;
    },
  },
};
